<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <areas :area-type="areaType" :areas="treeAreas" v-on:handleNodeClick="onHandleNodeClick"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-card>
          <div class="filter-container">
            <el-input v-model.trim="listQuery.name" class="filter-item"  placeholder="姓名"
                      style="margin-left: 20px;width: 120px" ></el-input>
            <el-input v-model.trim="listQuery.customer_number" class="filter-item"  placeholder="用户编号"
                      style="margin-left: 10px;width: 160px" ></el-input>
            <el-input v-model.trim="listQuery.mobile" class="filter-item"  placeholder="手机号"
                      style="margin-left: 10px;width: 120px" ></el-input>
            <el-input v-model.trim="listQuery.refer_number" class="filter-item"  placeholder="水司编号"
                      style="margin-left: 10px;width: 120px" ></el-input>
            <el-input  v-model="listQuery.device_number" class="filter-item" clearable
                       placeholder="终端编号" style="margin-left: 10px;width: 160px"></el-input>
          </div>
          <div class="filter-container">
            <el-select v-model="listQuery.status" class="filter-item" clearable placeholder="状态"
                       style="margin-left: 20px;width: 110px">
              <el-option
                v-for="item in [{name:'全部',value:-1},{name:'未扣费',value:0},{name:'已扣费',value:1}]"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              style="margin-left: 20px;width: 260px"
              class="filter-item"
              v-model="listQuery.date_range"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button  class="filter-item" icon="el-icon-search" style="margin-left:40px"
                        type="primary"
                        @click="getWaterAmountHistory">
              查询
            </el-button>

            <el-button  class="filter-item" icon="el-icon-download" :loading="btnLoading" style="margin-left:10px"
                        type="primary"
                        @click="exportWaterAmountHistory">
              导出
            </el-button>
          </div>
          <div class="app-container">
            <el-table
              :key="tableKey"
              ref="price-alloc"
              :loading="listLoading"
              :data="list"
              border
              fit
              highlight-current-row
              stripe
            >
              <el-table-column
                type="index"
                align="center"
                label="#"
                width="50">
              </el-table-column>
              <el-table-column align="center" label="姓名">
                <template v-slot="{row}">
                  <span>{{ row.customer ? row.customer.customer_name:'未知' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="类别">
                <template v-slot="{row}">
                  <span>{{ formatType(row.customer ? row.customer.customer_type:'') }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="地址">
                <template v-slot="{row}">
                  <span>{{ row.device? row.device.install_address: '未知' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="表号">
                <template v-slot="{row}">
                  <span>{{ row.device? row.device.terminal_number : '未绑定' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="户号">
                <template v-slot="{row}">
                  <span>{{ row.customer? row.customer.refer_number : '未绑定' }}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="付费模式">
                <template v-slot="{row}">
                  <span>{{ row.price_config_tpl | paymentModel}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="用水量">
                <template v-slot="{row}">
                  <span>{{ row.amount}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="累计用水量">
                <template v-slot="{row}">
                  <span>{{ row.record ? row.record.positive_volume : 0}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="水费">
                <template v-slot="{row}">
                  <span>{{ row.price_amount}}</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="状态">
                <template v-slot="{row}">
                  <span>{{ row.status === 0 ? '未扣费' : '已扣费'}} </span><br>
                  <span>{{ row.bill_status === 0 ? '未出账' : '已出账'}} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="当前余额">
                <template v-slot="{row}">
                  <span>{{ row.balance }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="日期">
                <template v-slot="{row}">
                  <span>{{ row.created_at | dateFormat }} </span>
                </template>
              </el-table-column>
<!--              <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="200">-->
<!--                <template v-slot="{row}">-->
<!--                  <el-button  size="mini" v-if="row.status === 0 && checkPermission('扣费')"  type="primary"-->
<!--                              @click="openBillSettlementWindow(row)">-->
<!--                    扣费-->
<!--                  </el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
            <pagination v-show="total>0" :limit.sync="listQuery.pageSize" :page.sync="listQuery.page" :total="total"
                        @pagination="getWaterAmountHistory"/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import areas from '@/components/area/AreaTree'
import Pagination from '@/components/Pagination'
import {getAreaTree} from "@/api/area";
import {checkPermission} from "@/utils/permission"
import BalanceRecordList from "@/views/finance/balance_records.vue";
import {waterAmountHistory} from "@/api/finance";
import moment from "moment";
import {getCustomerTypeText} from "@/utils";
import {exportExcel} from "@/utils/excel";

export default {
  name: 'WaterAmountHistory',
  components: {BalanceRecordList, Pagination,areas},
  data() {
    return {
      dialogFormVisible: false,
      btnLoading: false,
      drawer: false,
      tableKey: 0,
      listLoading: false,
      list: [],
      areaType: 2,
      treeAreas: [],
      recordTargetId:null,
      total: 0,
      listQuery: {
        area_code: '',
        device_number: '',
        name: '',
        mobile: '',
        status:-1,
        refer_number: '',
        customer_number: '',
        date_range:[],
        page: 1,
        pageSize: 20,
      },
      device:null
    };
  },
  filters: {
    paymentModel(rate) {
      if(rate == null) {
        return '未配价'
      }
      return rate.name
    },
    monthFormat(t){
      if(!t) {
        return '-'
      }
      return moment(t).format('YYYY-MM')
    },
    dateFormat(t){
      if(!t) {
        return '-'
      }
      return moment(t).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created() {
    this.getWaterAmountHistory()
    this.getAreaTree()
  },
  methods: {
    checkPermission,
    getAreaTree() {
      getAreaTree({type: 2}).then(response => {
        this.treeAreas = response.data
      })
    },
    onHandleNodeClick: function (data) {
      if (this.listQuery.area_code !== data.code) {
        this.listQuery.area_code = data.code
        this.getWaterAmountHistory()
      }
    },
    getWaterAmountHistory() {
      this.listLoading = true
      let query = Object.assign({}, this.listQuery)
      if(query.date_range !== null && query.date_range.length > 1) {
        query.date_range[0] = moment(query.date_range[0]).format('YYYY-MM-DD')
        query.date_range[1] = moment(query.date_range[1]).format('YYYY-MM-DD')
      }
      waterAmountHistory(query).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    exportWaterAmountHistory(row) {
      this.btnLoading = true
      let query = Object.assign({}, this.listQuery)
      if(query.date_range !== null && query.date_range.length > 1) {
        query.date_range[0] = moment(query.date_range[0]).format('YYYY-MM-DD')
        query.date_range[1] = moment(query.date_range[1]).format('YYYY-MM-DD')
      }
      query.pageSize = 50000
      waterAmountHistory(query).then(response => {
        const headers = ['姓名', '类别', '地址','表号','户号','付费模式','用水量','累计用水量','水费','是否扣费','是否出账','余额','日期']
        const data = response.data.list.map(item => ({
          姓名: item.customer ? item.customer.customer_name : '未知',
          类别: this.formatType(item.customer ? item.customer.customer_type : 0),
          地址: item.customer ? item.customer.install_address : '未知',
          表号: item.device ? item.device.terminal_number : '未知',
          户号: item.customer ? item.customer.refer_number : '未知',
          付费模式: item.price_config_tpl? item.price_config_tpl.name : '未配价',
          用水量: item.amount,
          累计用水量: item.record ? item.record.positive_volume:'0',
          水费: item.price_amount,
          是否扣费: item.status === 0 ? '未扣费' : '已扣费',
          是否出账: item.bill_status === 0 ? '未出账' : '已出账',
          余额: item.balance,
          日期: item.created_at ? moment(item.created_at).format('YYYY-MM-DD'):'未知'
        }))
        exportExcel(data, headers, '水费明细')
        setTimeout(() => {
          this.btnLoading = false
        }, 1.5 * 1000)
      })
    },
    formatType(value){
      return getCustomerTypeText(value)
    },
    resetQueryParams() {
      this.listQuery = {
        id: 0,
        page: 1,
        pageSize: 20,
        name: ''
      }
    }
  }
}
</script>
